<template>
  <el-dialog
    title="选择时间"
    :visible.sync="dialogVisible"
    width="30%"
    :lock-scroll="false"
    :before-close="handleClose"
>
    <div @dateType="onDateType">
      <span>选择时间：</span>
      <el-date-picker
        ref="datePicker"
        v-model="date"
        type="monthrange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM"
        style="width: 80%"
        @focus="dateType='month_select'"
        :picker-options="pickerOptions">
      </el-date-picker>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
export default {
  name: "DateDialog",
  data(){
    return {
      dialogVisible:false,
      pickerOptions: {
        shortcuts: [{
          text: '本周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            const day = new Date().getDay()-1
            start.setTime(start.getTime() - 3600 * 1000 * 24 * (day == -1 ? day + 1: day));
            let myEvent = new CustomEvent("dateType", {
              detail: { dateType: "week" }
            });
            window.dispatchEvent(myEvent);
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '本月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            const date = new Date().getDate()-1
            start.setTime(start.getTime() - 3600 * 1000 * 24 * date);
            let myEvent = new CustomEvent("dateType", {
              detail: { dateType: "month" }
            });
            window.dispatchEvent(myEvent);
            picker.$emit('pick', [start, end]);

          }
        }, {
          text: '本季度',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            const month  = new Date().getMonth()+1
            if(month>=1&&month<=3){
              start.setDate(1)
              start.setMonth(0)
            } else if(month>=4&&month<=6){
              start.setDate(1)
              start.setMonth(3)
            }else if(month>=7&&month<=9){
              start.setDate(1)
              start.setMonth(6)
            }else if(month>=10&&month<=12){
              start.setDate(1)
              start.setMonth(7)
            }
            let myEvent = new CustomEvent("dateType", {
              detail: { dateType: "quarter" }
            });
            window.dispatchEvent(myEvent);
            picker.$emit('pick', [start, end]);

          },
        }, {
            text: '本年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(0)
              start.setDate(1)
              let myEvent = new CustomEvent("dateType", {
                detail: { dateType: "year" }
              });
              window.dispatchEvent(myEvent);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
      date:'',
      dateType:'month_select',
      origin:"",
    }
  },
  mounted() {
    window.addEventListener("dateType", this.onDateType);
  },
  beforeDestroy() {
    window.removeEventListener("dateType", this.onDateType);
  },
  methods:{
    open(origin){
      this.origin = origin
      this.dialogVisible = true
    },
    submit(){
      this.$emit('selectDate',{date:this.date,dateType:this.dateType,origin:this.origin})
      this.cancel()
    },
    handleClose(){
      this.date = ''
      this.dialogVisible = false
      this.dateType = "month_select"
    },
    cancel(){
      this.date = ''
      this.dialogVisible = false
      this.dateType = "month_select"
    },
    onDateType(e){
      this.dateType = e.detail.dateType
    }
  }
}
</script>

<style scoped>
.el-date-picker{
  width: 100%;
}
</style>
